const { resolve } = require('path')
// 导入把html页面生成到内存中的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 导入指定浏览器的插件
// const openBrowser = require('open-browser-webpack-plugin')
// 导入webpack
const webpack = require('webpack')
// 删除dist的插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// 导入抽取css样式文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    entry: {
        index: './src/index.js',
        vendors: ['vue', 'vuex', 'vue-router', 'axios', 'mint-ui']
    },
    output: {
        filename: 'js/[name].js',
        path: resolve(__dirname, './dist')
    },
    optimization: {
        // 分割css方法一
        // splitChunks: {
        //         chunks: 'all',
        //         cacheGroups: {
        //             styles: {
        //               name: 'styles',
        //               test: /\.css$/,
        //               chunks: 'all',
        //               enforce: true,
        //             },
        //         },

        // },
        // 将当前模块记录其他模块的hash单独打包成一个文件runtime
        // runtimeChunk: true,

    },

    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',//指定，将来在内存中复制出来的页面，名称叫做index
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true,
            }
        }),
        new VueLoaderPlugin(),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: '../dist/style/index.css',
            chunkFilename: '../dist/style/[id].css',
        }),
    ],

    module: {
        rules: [
            {
                test: /\.css$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: "../"
                    },
                },
                    //loader取代style.loader,作用，提取js中的css文件
                    'css-loader',
                ],

            },

            {
                test: /\.less$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../"
                        },
                    },//loader取代style.loader,作用，提取js中的css文件
                    'css-loader', 'less-loader',

                ],
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../"
                        },
                    },//loader取代style.loader,作用，提取js中的css文件
                    'css-loader', 'less-loader', 'sass-loader'
                ],

            },
            { test: /\.vue$/, use: 'vue-loader' },
            {
                test: /\.jpg|png|gif|bmp$/,
                use: 'url-loader?limit=7631&name=images/[name].[ext]',

                //可以使用？给url-loader传递参数，limit表示图片的大小
                //$name=[hash:8]-[name].[ext]
            },
            {
                test: /\.js$/,
                use: 'babel-loader', exclude: /node_modules/
            },

            {
                test: /\.ttf|woff|woff2|eot|svg$/,
                use: 'url-loader'
            }



        ]
    },

    // mode: 'development'
}